<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                </div>
            </template>

            <template #form>
                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="dictTypeName">
                        <el-input v-model="formInline.dictTypeName" clearable placeholder="请输入枚举名称" />
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable :table-data="tableData" :tableHeight="tableScope.tableHeight"  :list-config="columns" :page-data="pageData" @on-action="onAction" />
            </template>
        </page-view>
        <eForm :dialog-visible="dialogVisible" :is-add="isAdd" :formData="formData" @on-submit="formSubmit"
            @handle-close="handleClose" />
    </div>
</template>
<script  setup name="enumerationManagement">
import { reactive, ref } from 'vue'
import eForm from './components/addForm.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import api from '@/api/index'

const formInline = reactive({})
const dialogVisible = ref(false)
const isAdd = ref('add')
const pageData = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const formData = ref({})

const tableData = ref([])

const OPERTATE = [
    { alias: 'edit', label: '编辑' },
    { alias: 'del', label: '删除' }
]

const columns = [
    { alias: 'dictTypeCode', label: '编号' },
    { alias: 'dictTypeName', label: '枚举名称' },
    { label: '操作', listArr: OPERTATE, width: '180px', fixed: 'right', type: 'action' }
]

onMounted(()=>{
    onSearch()
})

const onSearch = () => {
    const params = {...formInline,...pageData}
    api.dataMaintenance.dictsList(params).then((res)=>{
        tableData.value = res.list || []
        pageData.total = res.total || 0
    })
}
const deleteRow = (row)=>{
    ElMessageBox.confirm('确定删除此枚举信息吗？删除后将不可恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        api.dataMaintenance.deleteDict(row.id).then((res)=>{
            ElMessage({
                type: 'success',
                message: '删除成功!'
            });
            onSearch()
        })
    }).catch(() => {
        // error         
    });
}
const editRow = (row) => {
    api.dataMaintenance.getDictDetail(row.id).then((res)=>{
            formData.value = res
            dialogVisible.value = true
            isAdd.value = 'edit'
    })
}
const onAction = ([item, row]) => {
    const obj = {
        'del': deleteRow,
        'edit': editRow,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData[item] = row
        if (item === 'pageSize') pageData.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}

const showAddFrom = () => {
    formData.value = {}
    dialogVisible.value = true
    isAdd.value = 'add'
}
const formSubmit = (val)=>{
    const params = {...val}
    if(val.id){
        api.dataMaintenance.editDictDetail(params).then((res)=>{
                ElMessage({
                    type: 'success',
                    message: '编辑成功!'
                });
                onSearch()
        })
    }else{
        api.dataMaintenance.addDict(params).then((res)=>{
                ElMessage({
                    type: 'success',
                    message: '新增成功!'
                });
                onSearch()
        })
    }
}
const handleClose = val => {
    dialogVisible.value = val
}
</script>

<style lang="scss" scoped>
.clearfix {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 10px;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .role-span{
        font-weight: 700;
        color: #303133;
        font-size: 15px;
    }
}
.fixButtom{
    float: right;
}
</style>
